<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <span id="span">文本内容</span>
    <h3 @click="change_num" id="sp">{{number}}</h3>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            number: 30,
        },
        methods: {
            change_num() {
                this.number--;
            }
        },
        //vue 的生命周期  钩子
        beforeCreate: function () {
            console.log("beforeCreate:" + this.number);
        },//仅完成自身的事件的绑定以及生命周期的初始化
        created() {
            console.log("created:" + this.number);
        },//created函数执行时vue已经初始化了data属性
        beforeMount() {
            console.log("beforeMount:" + this.number);
            console.log("beforeMount:" + document.getElementById("span").innerText);
        },//函数执行时将el作为范围来经行模板编译
        mounted() {
            console.log("mounted: " + document.getElementById("span").innerText);
        },// 函数执行时,已经将数据渲染到页面中完成了页面数据的更新
        beforeUpdate() {
            console.log("beforeUpdate:" + document.getElementById("sp").innerText);
        },// 函数在数据修改时执行, 这个执行仅仅是数据变化,但页面显示为原来的 数据
        updated() {
            console.log("updated:" + document.getElementById("sp").innerText);
        },// 函数执行时,数据完成了更新和渲染
        beforeDestroy() {
        },
        destroyed() {
        },

    })
</script>
</body>
</html>